<div [class]="model.renderCssRoot">
  <div [class]="model.cssClasses.selectWrapper">
    <select *ngIf="!model.isReadOnly" [attr.id]="model.inputId" [(ngModel)]="editableValue"
      [disabled]="model.isInputReadOnly" (click)="click($event)" (keyup)="keyup($event)"
      [class]="model.getControlClass()" [attr.autocomplete]="model.autocomplete" [required]="model.isRequired"
      [attr.aria-required]="model.a11y_input_ariaRequired" [attr.aria-label]="model.a11y_input_ariaLabel"
      [attr.aria-invalid]="model.a11y_input_ariaInvalid" [attr.aria-errormessage]="model.a11y_input_ariaErrormessage">
      <option *ngIf="model.allowClear" value="">{{ model.placeholder }}</option>
      <ng-template *ngFor="let item of model.visibleChoices"
        [component]="{ name: 'sv-dropdown-option-item', data: { item } }"></ng-template>
    </select>
    <div *ngIf="model.isReadOnly" disabled [class]="model.getControlClass()" [attr.id]="model.inputId">{{
      model.readOnlyText }}</div>
    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton" aria-hidden="true">
      <svg [iconName]="model.cssClasses.chevronButtonIconId" [partCss]="model.cssClasses.chevronButtonSvg"
        [size]="'auto'" sv-ng-svg-icon></svg>
    </div>
  </div>
  <div *ngIf="model.isShowingChoiceComment" [class]="model.getCommentAreaCss(true)"
    [style.display]="model.isFlowLayout ? 'inline': '' " [question]="model" [item]="model.selectedItem" sv-ng-comment-choice></div>
</div>